/* 2.11 Type ======================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: $headings-font-family;
  font-weight: $headings-font-weight;
  color: $color-1-dark-5x;
}

.heading-line {
  &:after {
    content: "";
    display: block;
    margin-top: 32px;
    margin-bottom: 24px;
    width: 40px;
    height: 2px;
    background-color: $heading-line-bg-color;
  }
}

.text-center {
  .heading-line {
    &:after {
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.font-regular {
  font-size: $font-size-regular !important;
}
.font-xs {
  font-size: $font-size-tiny !important;
}
.font-sm {
  font-size: $font-size-small !important;
}
.font-md {
  font-size: $font-size-medium !important;
}
.font-lg {
  font-size: $font-size-large !important;
}
.font-xl {
  font-size: $font-size-extra-large !important;
}
.font-xxl {
  font-size: $font-size-xx-large !important;
}
.font-l {
  font-size: $font-size-lg;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .display#{$infix}-1 {
      font-size: $display1-size !important;
    }
    .display#{$infix}-2 {
      font-size: $display2-size !important;
    }
    .display#{$infix}-3 {
      font-size: $display3-size !important;
    }
    .display#{$infix}-4 {
      font-size: $display4-size !important;
    }
  }
}

.handwritten {
  font-family: $font-family-handwritten;

  &.highlight {
    line-height: 1.25em;
    transform: rotate(-5deg);

    &:before {
      content: "";
      background-image: url();
      margin-left: -1.5rem;

      //background-repeat: no-repeat;
      //background-size: 31px 55px;
      //background-position: center center;

      width: 31px;
      height: 55px;
      position: absolute;
    }
  }
}

@each $i, $color in $theme-colors {
  .fill-#{$i} {
    fill: $color;
  }
}
